<template>
  <div>
    <el-table :data="tableData" border style="width: 100%" empty-text="There is currently no data available">
      <el-table-column prop="operation" label="examine and approve" width="180">
        <template slot-scope="scope">
          <el-button size="mini" type="success" @click="applyPoint(scope, 3)">Approve</el-button>
          <el-button size="mini" type="danger" @click="applyPoint(scope, 4)">Refuse</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="name" width="180">
        <template slot-scope="scope">
          <span :title="scope.row.detail">{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="icon" label="icon">
        <template slot-scope="scope">
          <img v-if="scope.row.icon" :src="scope.row.icon | icon" alt="icon">
        </template>
      </el-table-column>
      <el-table-column prop="photo" label="photo">
        <template slot-scope="scope">
          <img v-if="scope.row.photo" :src="scope.row.photo | photo" alt="photo">
        </template>
      </el-table-column>
      <el-table-column prop="longitude" label="longitude" width="150">
      </el-table-column>
      <el-table-column prop="latitude" label="latitude" width="150">
      </el-table-column>
      <el-table-column prop="direction" label="direction" width="150">
      </el-table-column>
      <el-table-column prop="uploader" label="uploader" width="180">
      </el-table-column>
      <el-table-column prop="uploadTime" label="uploadTime">
      </el-table-column>

    </el-table>
  </div>
</template>
<script>
import { GetPointsAPI, ApplyPointAPI } from '@/api'
import config from '@/../config'
export default {
  data() {
    return {
      tableData: [],

      form: {
        type: 1,
        status: 2,
      }
    }
  },
  filters: {
    icon(val) {
      return config.host + 'static/pointIcon/' + val
    },
    photo(val) {
      return config.host + 'static/pointImage/' + val
    },
  },
  methods: {
    // Query all points by form
    async getPoints() {
      let { data } = await GetPointsAPI(this.form)
      this.tableData = data.points
    },
    // Approval point application
    async applyPoint(scope, status) {
      let pid = scope.row.pid
      let { data } = await ApplyPointAPI({ pid, status })
      if (data.code == 0) {
        this.tableData.splice(scope.$index, 1)
      }
    }
  },
  mounted() {
    this.getPoints()
  }
}
</script>
<style scoped></style>